<template>
	<view>
		<view class="top-box">
			<!-- #ifndef H5 -->
			<view class="" style="height: 40px;"></view>
			<!-- #endif -->

			<image src="https://img.50api.cn/vx.tongbayun.v3/myBj.png" class='img-bg'></image>

			<view class="userInfo-box">
				<view class="left" v-if="isLogin">
					<image :src="userInfo.image" mode="aspectFill"></image>
					<view class="name">
						<view>
							<view class="userName">{{userInfo.nickname}}</view>
							<view class="denglu">ID:{{userInfo.id}}</view>
							<view class="denglu levelflex">
								<image :src="username.image" mode="" class="levelimg"></image>
								<view>{{username.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="left" v-else @click.stop="$.to('/pages/my/login')">
					<image src="@/static/image/headPic.png" mode="aspectFill"></image>
					<view class="get-proto">点击头像</view>
					<view class="name">
						<view>
							<view class="userName">请去授权</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="news-btn">
						<view class="xiao" @click="$.to('/pages/my/news')">
							<u-badge type="error" :count="count" :offset="[0,-20]"></u-badge>
							<image src="../../static/image/xiaoxi.png" mode="heightFix" style="height : 40rpx;"></image>
						</view>
						<view class="" @click="$.to('/pages/my/setUp')">
							<image src="../../static/image/setup.png" mode="heightFix" style="height : 40rpx;"></image>
						</view>
					</view>
					<view class="edit" @click="gotoUser">
						<image src="http://mhimg.69box.cn/kaixiang/mf.png"></image>
						<text>编辑资料</text>
					</view>
				</view>

			</view>

			<view class="jinebox">
				<view class="jinebox-info" @click="$.to('/pagesA/pages/my/currency?sta=2')">
					<image src="../../static/image/xr.png" mode="aspectFill"></image>
					<view class="text">
						<view>幸运币</view>
						<text>{{ userInfo.integral }}</text>
					</view>
					<!-- 	<view class="">
						<view >幸运币</view>
						<text>{{ userInfo.integral }}</text>
					</view> -->

				</view>
				<view class="jinebox-info" @click="$.to('/pagesA/pages/my/currency?sta=3')">
					<image src="../../static/image/y2.png" mode="aspectFill"></image>
					<view class="text">
						<view>星石</view>
						<text>{{ userInfo.integral2 }}</text>
					</view>

				</view>
			</view>
		</view>

		<view class="fulibox">
<!-- 			<view class="fulibox-left" @click="$.to('/pagesA/pages/my/qiandao')">
				<view class="fulibox-info">
					<view>任务中心</view>
					<text>完成签到领取福利</text>
				</view>
				<image src="https://img.50api.cn/vx.tongbayun.v3/fu2.png" mode="heightFix"></image>
			</view>
			<view class="fulibox-middle"></view>
			<view class="fulibox-right" @click="sdkshow = true">
				<view class="fulibox-info">
					<view>福利中心</view>
					<text>超多星石拿到手软</text>
				</view>
				<image src="https://img.50api.cn/vx.tongbayun.v3/fu1.png" mode="heightFix"></image>
			</view> -->
			<view class="fulibox-left" @click="undeveloped">
				<view class="fulibox-info">
					<view>任务中心</view>
					<text>完成签到领取福利</text>
				</view>
				<image src="https://img.50api.cn/vx.tongbayun.v3/fu2.png" mode="heightFix"></image>
			</view>
			<view class="fulibox-middle"></view>
			<view class="fulibox-right" @click="undeveloped">
				<view class="fulibox-info">
					<view>福利中心</view>
					<text>超多星石拿到手软</text>
				</view>
				<image src="https://img.50api.cn/vx.tongbayun.v3/fu1.png" mode="heightFix"></image>
			</view>
		</view>



		<view class="myOrder">
			<view class="title n-flex-row n-justify-between">
				<view>我的订单</view>
				<!-- <view class="allorder" @click="$.to('/pages/my/order?idx=0')">
				全部订单 
				<u-icon size="26" name="arrow-right"></u-icon>
				</view> -->
			</view>
			<view class="orderList n-flex-row n-justify-between">
				<view class="list" @click="$.to('/pagesA/pages/my/order?idx=0')">
					<u-badge type="error" :offset='[-10,0]' :count="jiaoBiao.dfh"></u-badge>
					<image src="https://img.50api.cn/vx.tongbayun.v3/order%401.png" mode=""></image>
					<view>全部订单</view>
				</view>
				<view class="list" @click="$.to('/pagesA/pages/my/order?idx=1')">
					<u-badge type="error" :offset='[-10,0]' :count="jiaoBiao.dfh"></u-badge>
					<image src="https://img.50api.cn/vx.tongbayun.v3/order%402.png" mode=""></image>
					<view>待发货</view>
				</view>
				<view class="list" @click="$.to('/pagesA/pages/my/order?idx=2')">
					<u-badge type="error" :offset='[-10,0]' :count="jiaoBiao.yfh"></u-badge>
					<image src="https://img.50api.cn/vx.tongbayun.v3/order%403.png" mode=""></image>
					<view>待收货</view>
				</view>
				<view class="list" @click="$.to('/pagesA/pages/my/order?idx=3')">
					<image src="https://img.50api.cn/vx.tongbayun.v3/order%404.png" mode=""></image>
					<view>已完成</view>
				</view>
			</view>
		</view>

		<view class="invite" v-if="userInfo.level_id > 1">
			<view class="invite-title">
				<view class="invite-title-left">我的邀请</view>
				<view class="invite-title-right" @click="$.to('/pagesA/pages/my/yaoqing')">进入邀请<u-icon size="20"
						name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="invite-content">
				<image src="https://img.50api.cn/vx.tongbayun.v3/myInvite.png" mode=""></image>
				<view class="invite-content-info">
					<view class="info-item" @click="$.to('/pagesA/pages/my/currency?sta=1&tibtn=1')">
						<view>
							{{ userInfo.team_income_sum }}
						</view>
						<text>当前红包</text>
					</view>
					<view class="info-item" @click="$.to('/pagesA/pages/my/currency?sta=1&tibtn=1')" v-if="!isHide">
						<view>
							{{ userInfo.balance }}
						</view>
						<text>可提现红包</text>
					</view>
					<view class="info-item" @click="$.to('/pagesA/pages/my/myTeam')">
						<view>
							{{ userInfo.xj_count }}
						</view>
						<text>已邀好友</text>
					</view>
				</view>
			</view>
		</view>


		<view class="myapp">
			<view class="tit">我的应用</view>
			<view class="applist n-flex-row n-wrap">
				<view class="list" @click="$.to('/pagesA/pages/my/yaoqing')" v-if="userInfo.level_id > 1">
					<image src="../../static/image/li.png" mode=""></image>
					<view>邀请有奖</view>
				</view>
				<!-- <view class="list" @click="$.to('/pagesA/pages/my/qiandao')">
					<image src="../../static/image/qian.png" mode=""></image>
					<view>签到有奖</view>
				</view> -->
				<view class="list" @click="$.to('/pagesA/pages/my/coupon')">
					<image src="../../static/image/m9.png" mode=""></image>
					<view>优惠券</view>
				</view>
				<view class="list" @click="sdkshow = true">
					<image src="../../static/image/ma1.png" mode=""></image>
					<view>礼包码</view>
				</view>
<!-- 				<view class="list" @click="$.to('/pagesA/pages/my/myTeam')">
					<image src="../../static/image/friend.png" mode=""></image>
					<view>团队管理</view>
				</view> -->
				<view class="list" @click="$.to('/pagesA/pages/my/withdrawal')" v-if="!isHide">
					<image src="../../static/image/ma.png" mode=""></image>
					<view>申请提现</view>
				</view>
				<view class="list" @click="$.to('/pagesA/pages/my/address')">
					<image src="../../static/image/mc.png" mode=""></image>
					<view>地址管理</view>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="list" @click="lxkefu">
					<image src="../../static/image/m_.png" mode=""></image>
					<view>联系客服</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="list kefu" open-type="contact">
					<image src="../../static/image/m_.png" mode=""></image>
					<view>联系客服</view>
				</button>
				<!-- #endif -->
				<view class="list" @click="$.to('/pages/my/agreement?type=user_agreement')">
					<image src="../../static/image/yhxy.png" mode=""></image>
					<view>用户协议</view>
				</view>
				<view class="list" @click="$.to('/pages/my/agreement?type=privacy_policy')">
					<image src="../../static/image/yszc.png" mode=""></image>
					<view>隐政政策</view>
				</view>
				<view class="list" @click="$.to('/pages/my/agreement?type=risk_notification')">
					<image src="../../static/image/fxgz.png" mode=""></image>
					<view>风险告知</view>
				</view>
				<view class="list" @click="$.to('/pages/my/agreement?type=shipping_instructions')">
					<image src="../../static/image/fhxz.png" mode=""></image>
					<view>发货须知</view>
				</view>
				<!-- <view class="list">
					<image src="../../static/image/guan.png" mode=""></image>
					<view>企微福利官</view>
				</view> -->
			</view>
		</view>


		<u-popup v-model="sdkshow" mode="center" border-radius="16">
			<view class="cdkbox">
				<view class="tit">礼包码兑换</view>
				<u-input v-model="sdk" input-align="center" :clearable="false" type='text' :border="true" placeholder="请输入礼包码"/>
				<!-- <input v-model="sdk" type="text" placeholder="请输入礼包码" /> -->
				<button @click="duihuan">确定</button>
			</view>
		</u-popup>
		<kefu :isShow='kfshow' ref="child" @cusEvent="hide"></kefu>
		<u-tabbar v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import kefu from '@/components/kefu.vue'
	import {
		tabbar
	} from "@/common/tabbar.js"
	export default {
		data() {
			return {
				current: 5,
				tabbar: tabbar,
				background: {
					backgroundColor: '',
				},
				isLogin: false,
				userInfo: '',
				sdkshow: false,
				sdk: '',
				count: 0, //消息角标
				kfshow: false,
				jiaoBiao: '',
				username:'',
				isHide:false
			}
		},
		components: {
			kefu
		},
		onLoad() {
			// console.log(this.$u.config.v);
			uni.$on('updataUser', () => {
				this.getUser();
			})
		},
		onShow() {
			if (!uni.getStorageSync("user")) {
				uni.redirectTo({
					url: '/pages/my/login'
				})
			}
			this.getLogin()
			this.getUser()
			this.getNum()
		},
		onUnload() {
			uni.$off('updataUser');
		},
		methods: {
			undeveloped(){
				uni.showToast({
					icon: 'none',
					title: '敬请期待'
				})
			},
			gotoUser() {
				uni.navigateTo({
					url: '/pagesA/pages/my/userInfo'
				})
			},
			//获取各类订单状态数字
			getNum() {
				this.$http({
					url: "api/order/get_order_status_count",

				}).then(res => {
					console.log(res, "角标");
					if (res.data.code == 1) {
						var data = res.data.data
						this.jiaoBiao = {
							dfh: data.dfh,
							yfh: data.dsh
						}
					}
				}).catch(err => {});
			},
			hide() {
				this.kfshow = false
			},
			// 联系客服
			lxkefu() {
				this.$refs.child.getKf()
				this.kfshow = true
			},
			// 礼包码兑换
			duihuan() {
				if (this.sdk == "") {
					this.$tip.tip('请填写兑换码')
					return
				}
				this.$http({
					url: "api/member/cdkey",
					data: {
						kahao: this.sdk
					}
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.$tip.tip(res.data.msg)
						this.sdkshow = false
						this.getUser();
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			getLogin() {
				if (uni.getStorageSync("user")) {
					this.isLogin = true
				} else {
					this.isLogin = false
				}
			},
			getUser() {
				this.$http({
					url: "api/member/get_user_info",
				}).then(res => {
					// console.log(res,'get_user_info');
					if (res.data.code == 1) {
						this.getLogin()
						this.userInfo = res.data.data.member
						this.username = res.data.data.levelInfo
						this.isHide = res.data.data.isHide
						// console.log(this.userInfo);
						uni.setStorageSync('user', res.data.data.member)
					}
				}).catch(err => {});
			},
			sc() {
				uni.switchTab({
					url: '/pages/tabBar/mall'
				})
				// setTimeout(() => {
				// 	uni.$emit('sc', 0)
				// }, 300)
			},
			mh() {
				uni.switchTab({
					url: '/pages/tabBar/cangku'
				})
				setTimeout(() => {
					uni.$emit('sc', 0)
				}, 300)
			},
		}
	}
</script>

<style lang="scss" scope>
	page {
		background-color: rgb(239, 243, 250);
	}

	.top-box {
		width: 750rpx;
		height: 480rpx;
		padding-top: 44rpx;
		box-sizing: border-box;
		position: relative;

		.img-bg {
			width: 750rpx;
			height: 480rpx;
			position: absolute;
			top: 0
		}

		.userInfo-box {
			width: 690rpx;
			height: 60rpx;
			position: absolute;
			box-sizing: border-box;
			left: 30rpx;
			top: 196rpx;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				position: relative;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					margin-right: 30rpx;
				}

				.get-proto {
					position: absolute;
					width: 140rpx;
					text-align: center;
					font-size: 22rpx;
					color: #fff;
					text-align: center;
				}
				.levelimg{
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
				.denglu {
					color: #fff;
					font-size: 28rpx;
					margin-top: 10rpx;
					font-weight: 500;
				}
				.levelflex{
					display: flex;
					align-items: center;
				}
				.userName {
					color: #fff;
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			.edit {
				display: flex;
				align-items: center;
				border-radius: 60rpx;
				height: 60rpx;
				border: 1rpx solid #000;
				padding: 0 20rpx;
				margin-top: 30rpx;
			}

			.edit image {
				width: 36rpx;
				height: 36rpx;
			}

		}

		.jinebox {
			width: 690rpx;
			height: 150rpx;
			position: absolute;
			box-sizing: border-box;
			left: 30rpx;
			bottom: 0rpx;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			display: flex;
			justify-content: space-around;

			.jinebox-info {
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				color: #000;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}

				.text {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				view {
					font-weight: bold;
				}

				text {
					margin-top: 6rpx;
				}
			}
		}
	}

	.fulibox {
		height: 150rpx;
		width: 690rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
		border-radius: 16rpx;
		background-color: #fff;
		display: flex;
		align-items: center;

		&-left,
		&-right {
			width: 334rpx;
			height: 100%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			.fulibox-info {
				flex-shrink: 0;
				width: 160rpx;
				text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: center;

				view {
					font-size: 30rpx;
					font-weight: bold;
				}

				text {
					font-size: 20rpx;
					color: rgb(160, 74, 255);
					margin-top: 12rpx;
				}
			}

			image {
				height: 76rpx;
				flex-shrink: 0;

			}
		}

		&-middle {
			width: 2rpx;
			height: 80rpx;
			background-color: #ddd;
		}
	}


	.myOrder {
		height: 200rpx;
		width: 690rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 20rpx 20rpx 30rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;

			.allorder {
				font-size: 26rpx;
				color: #999;

				.u-icon {
					margin-left: 16rpx;
				}
			}
		}

		.orderList {
			margin-top: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		.orderList .list {
			text-align: center;
			position: relative;
			font-size: 20rpx;
		}

		.orderList image,
		.myapp .list image {
			width: 55rpx;
			height: 55rpx;
		}
	}


	.invite {
		height: 270rpx;
		width: 690rpx;
		box-sizing: border-box;
		margin: 0rpx auto;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 20rpx 30rpx 30rpx;

		.invite-title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-left {
				font-size: 30rpx;
				font-weight: bold;
			}

			&-right {
				font-size: 22rpx;
				height: 50rpx;
				width: 150rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: rgba(160, 74, 255, .6);
				border-radius: 25rpx;
				color: #fff;

				.u-icon {
					margin-left: 6rpx;
				}
			}
		}

		.invite-content {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			image {
				height: 140rpx;
				width: 240rpx;
				flex-shrink: 0;
			}

			&-info {
				display: flex;
				justify-content: space-between;
				width: 100%;
				text-align: center;
			}

			.info-item {
				width: 100%;

				view {
					font-size: 34rpx;
					font-weight: bold;
				}

				text {
					font-size: 22rpx;
					margin-top: 16rpx;
					color: #999;
				}
			}
		}
	}



	.myapp {
		// height: 270rpx;
		width: 690rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 20rpx 30rpx 30rpx;

		.tit {
			font-size: 30rpx;
			font-weight: bold;

		}

		.list {
			margin-top: 30rpx;
			text-align: center;
			width: 25%;
			font-size: 28rpx;
			line-height: 1.5;
			padding: 0;
			padding: 10rpx;

			view {
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #888;
			}
		}

		.list image {
			width: 45rpx;
			height: 45rpx;
		}
	}


	.cdkbox {
		width: 500rpx;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;

		.tit {
			text-align: center;
			margin-bottom: 35rpx;
		}

		.inp {
			border-radius: 16rpx;
			border: 1rpx solid #333;
			height: 60rpx;
		}

		button {
			border-radius: 8rpx;
			color: #fff;
			background-color: #00E1DB;
			height: 70rpx;
			line-height: 70rpx;
			margin-top: 25rpx;
			font-size: 28rpx;
		}
	}

	.kefu {
		background: none;
	}

	button::after {
		border: none;
	}
	.news-btn{
		display: flex;
		justify-content: flex-end;
		position: absolute;
		top: -30rpx;
		width: 190rpx;
	}
	.news-btn image{
		margin-left: 30rpx;
	}
</style>
